<!--
 * @Description: 词云
 * @Author: YoungWind
 * @Date: 2020-09-28 17:10:03
 * @LastEditTime: 2020-09-29 21:59:22
 * @LastEditors: YoungWind
 * @FilePath: \ccd3\src\ccd3\wordCloud\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../css/root.css">
  <link rel="stylesheet" href="../../css/grid.css">

  <script src="../../../libs/d3/d3.v6.js"></script>
  <script src="../../../libs/d3/d3.layout.cloud.js"></script>

</head>

<body>
  <header>
    <h1>词云</h1>
  </header>
  <main class="container">
    <h2>基本词云</h2>
    <section>
      <div id="wordCloud" style="height: 50vh;"></div>
    </section>

  </main>

  <script type="module">
    import { WordCloud } from '../../dist/ccd3.js'

    d3.json('./data/wordCloud.json').then(data => {
      const wordCloud = new WordCloud('wordCloud', data)
        .setFontScale(15)
        .setPadding(0)
        .setFontFamily("微软雅黑")
        .setBackgroundColor("")
        // .setColor(['red', 'blue'])
        .setRotate(() => 0)
        .setSpiral(size => {
          const e = size[0] / size[1];
          return function (t) {
            return [e * (t *= 0.01) * Math.cos(t), t * Math.sin(t)];
          };
        })
        .init()
        .render();
    }).catch(e => {
      console.error(e);
    })

  </script>
</body>

</html>